<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/favicon.ico">
  <link rel="icon" type="image/png" href="./favicon.ico">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
    name='viewport' />

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">

  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

  <!-- Main CSS -->
  <link href="../assets/css/main.css" rel="stylesheet" />

  <!-- Animation CSS -->
  <link href="../assets/css/vendor/aos.css" rel="stylesheet" />
  <title>排班管理模块</title>
  <style>
    body {
      background-color: rgb(236, 242, 247);
    }

    .urelimg {
      /* width: 50px; */
      box-shadow: 8px 14px 9px 3px rgba(0, 0, 0, 0.4);
    }

    .card {
      width: 320%;
    }

    .img {
      width: 70%;
    }
  </style>
</head>

<body>

  <div style="position:fixed; bottom:20px;left:20px;">
    <a href="./project_index.html" target="_blank"><img class="rounded-circle shadow-lg"
        src="../assets/img/demo/coffee.png" width="70" data-toggle="tooltip" data-placement="top" title=""
        data-original-title="Buy me a coffee!"></a>
  </div>

  <div class="jumbotron jumbotron-lg jumbotron-fluid mb-3 bg-danger position-relative">
    <div class="container text-white h-100 tofront">
      <div class="row align-items-center justify-content-center text-center">
        <div class="col-md-10">
          <h1 class="display-3">排班管理模块详情</h1>
        </div>
      </div>
    </div>
  </div>

  <!-- Main -->
  <div class="container pt-5 pb-5" data-aos="fade-up">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <article>
          <h1>功能实现（冷祝基）</h1>
          <p>
            排班管理模块主要实现的功能 是 <strong>添加工作模式</strong>，为员工<strong>批量绑定排班</strong>
            ,实现<strong>搜索重置功能</strong>，当点击排版设置时<strong>路由跳转页面</strong> ， 当进入到排版页面实现<strong>增、删、改、查</strong>功能！
          </p>
          <h3>主页运行样式展示图</h3>
          <p>
            主页通过接口调数据渲染出来表格
          </p>
          <figure class="text-center mt-4 mb-4 full-width" data-aos="fade-up">
            <img src="./img/workimg/首页.png" class="figure-img  img urelimg" alt="">
            <figcaption class="figure-caption">渲染图</figcaption>
          </figure>
          <p>
            当我再写，渲染表格的时候出现了比较困难的地方，就是当需要<strong>添加的表格列数过多时，不能在通过手动的一步一步添加，既费时又费力</strong>，所以我们改用v-for来完成循环添加，
            <strong>代码如下：</strong>
          </p>
          <blockquote>
            <p>
              <img src="./img/workimg/vfor_1.1.png" alt="" class="urelimg">
            </p>
          </blockquote>

          <h3 style="margin-top: 50px;" data-aos="fade-up">主页批量绑定排班功能展示</h3>
          <p data-aos="fade-up">
            通过有无选中 成员 来判断是否能够打开绑定 的 弹框,且点击确定按钮和取消按钮的时候重置对选的状态
          </p>
          <figure class="text-center mt-4 mb-4 full-width" data-aos="fade-up">
            <img src="./img/workimg/批量添加模板 -big-original.gif" class="figure-img img urelimg" alt="">
            <figcaption class="figure-caption">批量绑定演示图</figcaption>
          </figure>

          <h3 style="margin-top: 50px;" data-aos="fade-up">主页<strong>搜索、查询功能</strong>展示</h3>
          <p data-aos="fade-up">
            在这里，需要进行注意的是 在网点接口返回的数据是JSON类型的数据，将他转换为正常的格式 会呈现树形结构
          </p>
          <figure class="text-center mt-4 mb-4 full-width" data-aos="fade-up">
            <img src="./img/workimg/搜索和重置功能 -big-original.gif" class="figure-img img urelimg" alt="">
            <figcaption class="figure-caption">批量绑定演示图</figcaption>
          </figure>
        </article>
      </div>
    </div>
  </div>
  <!-- End Main -->
  <div class="container pt-5 pb-5" data-aos="fade-up">
    <div class="row justify-content-center" style="margin-bottom: 50px;">
      <div class="col-md-8">
        <article>
          <h1><strong>排班设置</strong>功能展示</h1>
          <p>
            在整个模块中，难度比较大的就是 排班设置中 提交接口时的数据处理 ，和数据回填的设置
          </p>
        </article>
      </div>
    </div>
  </div>

  <div style="width: 70%; margin: auto; margin-bottom: 80px;" data-aos="zoom-in-up">
    <div class="col-md-6 col-lg-4">
      <div class="card">
        <video autoplay loop muted>
          <source src="./img/workimg/添加回填.mp4" type="video/mp4" class="">
        </video>
        <div class="card-body">
          <h5 class="card-title text-dark">添加模板功能中使用了 element-ui 的时间选择器 此时 选择的时间格式和需要的时间格式 有出入 这是我们要进行数据的处理</h5>
          <span class="card-text text-muted">
            <div class="container pt-5 pb-5" data-aos="fade-up">
              <div class="row justify-content-center">
                <div class="col-md-8">
                  <article data-aos="fade-up">
                    <h4>创建存放数据的<strong>响应式数据</strong></h4>
                    <blockquote>
                      <p>
                        <img src="./img/workimg/完整数据.png" alt="" class="urelimg">
                      </p>
                    </blockquote>
                    <p></p>
                    <h4>处理<strong>星期数据(是否休息)</strong></h4>
                    <blockquote data-aos="fade-up">
                      <p>
                        <img src="./img/workimg/处理.png" alt="" class="urelimg">
                      </p>
                    </blockquote>
                    <h4>处理<strong>时间数据</strong></h4>
                    <blockquote data-aos="fade-up">
                      <p>
                        <img src="./img/workimg/时间.png" alt="" class="urelimg">
                      </p>
                    </blockquote>
                  </article>
                </div>
              </div>
            </div>
          </span>
        </div>
      </div>
    </div>
  </div>















  <!-- dark footer -->
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
    y="0px" viewBox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
    <path class="bg-black" d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
      style="margin-top: 200px;">
    </path>
  </svg>
  <footer class="bg-black pb-5">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md mr-4">
          <i class="fas fa-copyright text-white"></i>
          <small class="d-block mt-3 mb-3 text-muted">© 排班管理模块</small>
        </div>
        <div class="col-6 col-md">
          <h5 class="mb-4 text-white">模块制作人</h5>
          <ul class="list-unstyled text-small">
            <li style="font-weight: 900"><a class="text-muted" href="#">冷祝基</a></li>
          </ul>
        </div>
        <div class="col-6 col-md">
          <h5 class="mb-4 text-white">素材制作人</h5>
          <ul class="list-unstyled text-small">
            <li><a class="text-muted" href="#">冷祝基</a></li>
          </ul>
        </div>
      </div>
  </footer>

  <!--------------------------------------
JAVASCRIPTS
--------------------------------------->
  <script src="../assets/js/vendor/jquery.min.js" type="text/javascript"></script>
  <script src="../assets/js/vendor/popper.min.js" type="text/javascript"></script>
  <script src="../assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
  <script src="../assets/js/functions.js" type="text/javascript"></script>

  <!-- Animation -->
  <script src="../assets/js/vendor/aos.js" type="text/javascript"></script>
  <noscript>
    <style>
      *[data-aos] {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
      }
    </style>
  </noscript>
  <script>
    AOS.init({
      duration: 700
    });
  </script>

  <!-- Disable animation on less than 1200px, change value if you like -->
  <script>
    AOS.init({
      disable: function () {
        var maxWidth = 1200;
        return window.innerWidth < maxWidth;
      }
    });
  </script>
</body>

</html>